<!--{template mobile/frame/header_simple_start}-->
<link rel="stylesheet" type="text/css" href="{MOD_PATH}/css/mobile/personal.css?{VERHASH}" />
<!--{template mobile/frame/header_simple_end}-->
<div id="dzzoffice">
	<van-nav-bar title="个人设置" left-arrow @click-left="NavbarLeftClick"></van-nav-bar>
	<div class="scroll-box">
		<van-form @submit="handleSubmit">
			<div style="text-align: center;">
				<div>
					<van-image
						width="100px"
						height="100px"
						fit="contain"
						:src="avatarstatus&&ruleForm.imgpath?ruleForm.imgpath:'avatar.php?uid=1&random='+Math.ceil(Math.random()*100)">
						<template v-slot:default >
							<template v-if="parseInt(avatarstatus)==0">
								<van-icon class="not-img" name="photograph" />
							</template>
							
						</template>
					</van-image>
				</div>
				<van-uploader 
				:after-read="ImageafterRead"
				:max-size="1024*1024*2"
				@oversize="ImageOversize"
				accept="image/png,image/jpg,image/jpeg,image/gif">
					<van-button type="primary" size="small">修改头像</van-button>
				</van-uploader>
			</div>
			<van-field 
				v-model.trim="ruleForm.email"
				type="email"
				required
			    :rules="[{ required: true, message: '请填写邮箱' }]">
				<template #label>
					邮箱:<span class="tip">(用于登录)</span>	
				</template> 
			</van-field>
			<van-field
				v-model.trim="ruleForm.nickname"
				required
			    :rules="[{ required: true, message: '请填写用户名' }]">
				<template #label>
					用户名:<span class="tip">(用于登录，站点中不显示)</span>	
				</template> 
			</van-field>
			<van-field
				v-model.trim="ruleForm.username"
				required
			    :rules="[{ required: true, message: '请填写姓名' }]">
				<template #label>
					姓名:<span class="tip">(用于登录，站点中不显示)</span>	
				</template> 
			</van-field>
			<van-field v-model.number="ruleForm.phone" type="tel" label="手机号:"></van-field>
			<van-field v-model.trim="ruleForm.weixinid" label="微信号:"></van-field>
			<van-field v-model.trim="ruleForm.password" label="新密码:"></van-field>
			<van-field style="overflow: unset;" v-model.trim="ruleForm.password2" label="确认新密码:" :error-message="passwordMessage"></van-field>
			<div class="van-cell van-field">
				<div>主题色</div>
				<ul class="thems">
					<li class="thems-item" v-for="item in themes">
						<div class="bg" :style="item.color" :class="item.val==ruleForm.themecolor?'active':''" @click="handleChangeThemes(item.val)">
							<van-icon name="success" />
						</div>
					</li>
				</ul>
			</div>
			<div class="footer">
				<van-button round type="info" size="large" native-type="submit">提交</van-button>
			</div>
		</van-form>
	</div>
</div>
<script type="text/javascript">
	new Vue({
		el: '#dzzoffice',
		data: function() {
			return {
				avatarstatus:$userdata[avatarstatus],
				ruleForm: {
					imgpath:'',
					email:'$userdata[email]',
					nickname:'$userdata[nickname]',
					username:'$userdata[username]',
					phone:'$userdata[phone]',
					weixinid:'$userdata[weixinid]',
					password:'',
					password2:'',
					themecolor:'$theme'
				},
				themes:[
					{txt:'自动(依系统设置)',color:'',val:''},
					{txt:'白色',color:'background:#D0D0D0',val:'white'},
					{txt:'浅灰色',color:'background:#808080',val:'lightgrey'},
					{txt:'深灰色',color:'background:#444444',val:'darkgrey'},
					{txt:'黑色',color:'background:#333333',val:'black'},
					{txt:'深蓝色',color:'background:#2A356D',val:'navyblue'},
					{txt:'紫色',color:'background:#463275',val:'purple'},
				],
				passwordMessage:'',
			};
		},

		computed: {
	
		},
		created() {
		},
		methods:{
			ImageafterRead(file){
				this.ruleForm.imgpath = file.content;
				this.avatarstatus = 1;
			},
			ImageOversize(file){
				var self = this;
				self.$toast.fail('图片大小不能超过 2MB!');
			},
			NavbarLeftClick(){
				window.location.href="{MOD_URL}"
			},
			handleChangeThemes(val){
				this.ruleForm.themecolor = val;
			},
			handleSubmit(){
				self = this;
				if((self.ruleForm.password || self.ruleForm.password2) && self.ruleForm.password != self.ruleForm.password2){
					self.passwordMessage = '两次输入密码不一致';
					return false;
				}else{
					self.passwordMessage = '';
				}
				var params = {
					'accountedit':true,
					'formhash':'{FORMHASH}',
					'uid':'$uid',
					'email':self.ruleForm.email,
					'nickname':self.ruleForm.nickname,
					'username':self.ruleForm.username,
					'phone':self.ruleForm.phone,
					'weixinid':self.ruleForm.weixinid,
					'password':self.ruleForm.password,
					'password2':self.ruleForm.password2,
					'themecolor':self.ruleForm.themecolor,
				};
				if(self.ruleForm.imgpath){
					params['imgpath'] = self.ruleForm.imgpath;
				}
				$.post(MOD_URL+"&op=user&do=personal",params,function(res){
					if(res.success){
						self.$toast.success('提交成功');
					}else{
						self.$toast.fail('提交失败');
					}
				},'json');
			}
		},
		mounted() {
		}
	});
</script>
<!--{template mobile/frame/footer_simple}-->
